<template>
  <el-row>
    <el-card class="box-card" :body-style="{ padding: '0px' }">
      <el-row class="title"><h4>我的订单</h4></el-row>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="orderNum" label="订单编号" width="300"></el-table-column>
        <el-table-column prop="name" label="联系人项目" width="180"> </el-table-column>
        <el-table-column prop="phone" label="联系人电话"> </el-table-column>
        <el-table-column prop="orderState" label="订单状态"> </el-table-column>
        <el-table-column prop="orderPrice" label="订单金额"> </el-table-column>
        <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
        </template>
        </el-table-column>
      </el-table>
    </el-card>
      <el-row class="page">
        <el-pagination
            layout="prev, pager, next"
            :total="10">
        </el-pagination>
      </el-row>
  </el-row>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
            {
                orderNum: "O2021012600004",
                name: "明明白白",
                phone: "11512341234",
                orderState: "已下单",
                orderPrice: 73.5,
            },
            {
                orderNum: "O2021012600004",
                name: "明明白白",
                phone: "11512341234",
                orderState: "已下单",
                orderPrice: 73.5,
            },
            {
                orderNum: "O2021012600004",
                name: "明明白白",
                phone: "11512341234",
                orderState: "已下单",
                orderPrice: 73.5,
            },
            ],
        };
    },
    // methods:{
    //     init(){
    //         console.log(document.getElementsByTagName('table')[0])
    //         document.getElementsByTagName('table')[0].style.margin='0px'
    //         console.log(document.getElementsByTagName('table')[0])

    //     }
    // },
    // mounted(){
    //     document.getElementsByTagName('table')
    // }
};
</script>

<style scoped>
.box-card {
    margin-top: 50px;
    width: 100%;
}
.title{
    background: #ddd;
}
h4{
    padding-left: 10px;
    margin: 0;
    height: 40px;
    line-height: 40px;
}
.page{
    margin: 10px 0px;
}
</style>